import React from 'react';
import { connect } from 'dva/index';
import { Button, Col, Form, Input, InputNumber, Modal, Row, Select, AutoComplete } from 'antd';
const FormItem = Form.Item;
const costDetail = Form.create()(
  class CostDetail extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      return (
        // @ts-ignore
        <Modal
          maskClosable={false}
          visible={this.state.open}
          width={850}
          title={'费用详情'}
          confirmLoading={this.props.loading}
          onCancel={this.handleCancel.bind(this)}
        >
          <Form>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col span={12}>
                <FormItem label="结算单位" hasFeedback>
                  {getFieldDecorator('costObject', {
                    rules: [
                      {
                        required: true,
                        message: '请输入结算单位',
                      },
                    ],
                  })(
                    <Select>
                      <Select.Option value="CNY">供应商</Select.Option>
                      <Select.Option value="USD">银行</Select.Option>
                      <Select.Option value="HKD">快递公司</Select.Option>
                    </Select>)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="费用项目" hasFeedback>
                  {getFieldDecorator('feeItemId', {
                    rules: [
                      {
                        required: true,
                        message: '请选择费用项目',
                      },
                    ],
                  })(
                    // @ts-ignore
                    <Select style={{ width: '100%' }} showSearch placeholder="可通过输入关键字搜索">
                      <Select.Option value={1} key={1}>
                        GPS
                      </Select.Option>
                      <Select.Option value={2} key={2}>
                        封条费
                      </Select.Option>
                      <Select.Option value={3} key={3}>
                        过磅费
                      </Select.Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col span={12}>
                <FormItem label="单价" hasFeedback>
                  {getFieldDecorator('fee', {
                    rules: [
                      {
                        required: true,
                        message: '请输入单价',
                      },
                    ],
                  })(<InputNumber style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="数量" hasFeedback>
                  {getFieldDecorator('count', {
                    rules: [
                      {
                        required: true,
                        message: '请输入数量',
                      },
                    ],
                  })(<InputNumber style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col span={12}>
                <FormItem label="币种" hasFeedback>
                  {getFieldDecorator('currency', {
                    rules: [
                      {
                        required: true,
                        message: '请选择币种',
                      },
                    ],
                  })(
                    <Select>
                      <Select.Option value="CNY">人民币[CNY]</Select.Option>
                      <Select.Option value="USD">美元[USD]</Select.Option>
                      <Select.Option value="HKD">港币[HKD]</Select.Option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="汇率" hasFeedback>
                  {getFieldDecorator('rate', {
                    rules: [
                      {
                        required: true,
                        message: '请输入汇率',
                      },
                    ],
                  })(<InputNumber style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col span={24}>
                <FormItem label="备注" hasFeedback>
                  {getFieldDecorator('memo', {})(<Input />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.orderCharge,
    orderCharge: state.orderCharge,
    feeItem: state.feeItem,
    supplier: state.supplier,
    company: state.company,
  };
}

export default connect(mapStateToProps)(costDetail);
